<template>
<Layout>
    <Sider breakpoint="md" collapsible :collapsed-width="110" v-model="isCollapsed" :style="{background: '#fff'}">
        <Menu theme="light" width="auto" :class="menuitemClasses" accordion @on-select="show_spin">
            <Submenu name="1" >
                <template #title>
                    <Icon type="md-code" />
                    <span>线性表</span>
                </template>
                <MenuItem name="1-1" to="chatlinearList">顺序表</MenuItem>
                <MenuItem name="1-2" to="chatsingleList">单链表</MenuItem>
                <MenuItem name="1-3" to="chatstackList">栈</MenuItem>
                <MenuItem name="1-4" to="chatqueueList">队列</MenuItem>
                <MenuItem name="1-6" to="chatlinkedQueue">链式队列</MenuItem>
            </Submenu>
            <Submenu name="2">
                <template #title>
                    <Icon type="ios-git-merge" />
                    <span>树</span>
                </template>
                <MenuItem name="2-1" to="chatBST">二叉搜索树</MenuItem>
                <MenuItem name="2-2" to="chatheap_tree">堆</MenuItem>
                <MenuItem name="2-3" to="chathuo_fu_man_tree">霍夫曼树</MenuItem>
                <MenuItem name="2-4" to="chatavl_tree">AVL树</MenuItem>
                <MenuItem name="2-5" to="chatzhuan_huan">二叉树转换</MenuItem>
                <MenuItem name="2-6" to="chatxian_suo_tree">线索二叉树</MenuItem>
            </Submenu>
            <Submenu name="3">
                <template #title>
                    <Icon type="ios-keypad" />
                    <span>图</span>
                </template>
                <Submenu name="3-1">
                    <template #title>
                        图的遍历
                    </template>
                    <MenuItem name="3-1-1" to="chatDFS_traverse">DFS遍历</MenuItem>
                    <MenuItem name="3-1-2" to="chatBFS_traverse">BFS遍历</MenuItem>
                </Submenu>
                <Submenu name="3-2">
                    <template #title>
                        最小生成树
                    </template>
                    <MenuItem name="3-2-1" to="chatprim">Prim算法</MenuItem>
                    <MenuItem name="3-2-2" to="chatkruskal">Kruskal算法</MenuItem>
                </Submenu>
                <Submenu name="3-3">
                    <template #title>
                        最短路径
                    </template>
                    <MenuItem name="3-3-1" to="chatdijkstra">Dijkstra算法</MenuItem>
                    <MenuItem name="3-3-2" to="chatfloyd">Floyd算法</MenuItem>
                </Submenu>

            </Submenu>
            <Submenu name="4">
                <template #title>
                    <Icon type="md-stats" />
                    <span>排序</span>
                </template>
                <MenuItem name="4-1" to="chatcompare_sort">比较排序</MenuItem>
                <MenuItem name="4-2" to="chatheap_sort">堆排序</MenuItem>
                <MenuItem name="4-3" to="chatji_shu">基数排序</MenuItem>
            </Submenu>
            <Submenu name="5">
                <template #title>
                    <Icon type="md-search" />
                    <span>查找</span>
                </template>
                <MenuItem name="5-1" to="chatsearch">查找</MenuItem>
                <MenuItem name="5-2" to="chatstring_match">字符串匹配</MenuItem>
            </Submenu>
        </Menu>
    </Sider>
    <Layout :style="{padding: '0px 5px 0px'}">
                    <Content :style="{padding: '10px 10px 0px', minHeight: '800px', background: '#fff'}">
                        <Friends @message-updated="handleMessageUpdated"></Friends>
                        <Chat1 :message="name"></Chat1>
                        <router-view> </router-view>
                    </Content>
    </Layout>
</Layout>
</template>

<script>
import friends from '../components/friends.vue';
import Chat1 from '../components/chat1.vue';
import { Submenu } from 'view-ui-plus';
import Friends from '../components/friends.vue';
export default {
    data() {
        return {
            isCollapsed: false,
            name:""
        };
    },
    methods:{
        handleMessageUpdated(name) {
            this.name = name;
            this.$emit('custom-event', name)
    },
    handleChildEvent(data) {
      // 处理子组件发送的事件和数据
      console.log('Received message from child:', data);
    },
        show_spin(){
            this.$Spin.show();
            setTimeout(() => {
                this.$Spin.hide();
            }, 1500);
        },
    },
    components: { Submenu, Chat1, Friends },

}
</script>